<template>
    <div style="width: 1000px; margin: 15px auto;">


        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="query for sql" name="first">

                <el-form :model="form" label-width="80px">

                    <el-form-item label="SQL">
                        <el-input type="textarea" v-model="form.sql" :rows="10" placeholder="Please input"></el-input>
                        <el-button type="primary" @click="onSearch">query</el-button>
                        <!-- <el-input v-model="form.result" :rows="10" placeholder="Please input"></el-input> -->
                        <vue-json-pretty :data="form.result" />
                    </el-form-item>

                </el-form>
            </el-tab-pane>
            <el-tab-pane label="run it" name="second">

                <el-form :model="form" label-width="80px">

                    <el-form-item label="SQL CMD">
                        <el-input type="textarea" v-model="form.sql1" :rows="10" placeholder="Please input"></el-input>
                        <el-button type="primary" @click="onRun">Submit</el-button>
                        <!-- <el-input v-model="form.result" :rows="10" placeholder="Please input"></el-input> -->
                       
                    </el-form-item>

                </el-form>
            </el-tab-pane>

        </el-tabs>
        <!-- // form input is a textarea, click button to show the sql -->

    </div>
</template>

<script>
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';

import { amitaService } from '@/api/apiService'
export default {

    components: {
        VueJsonPretty,
    },

    data() {
        return {
            form: {
                sql: '',
                sql1: '',
                result: ''
            }
        }
    },
    methods: {
        
        onSearch() {

            amitaService.querysql({ sql: this.form.sql }).then(res => {
                console.log(res)
                this.form.result = res.data;
            })
        },
   
        onRun() {

            amitaService.runsql({ sql: this.form.sql1 })
        },
    }
}
</script>

<style lang="scss" scoped></style>
